<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>教务数据分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/public.css" rel="stylesheet" type="text/css"/>
    <style>
        #myTab{
            margin-right: 100px;
        }
        #myTab li{
            float: right;
            margin-left: 20px;
        }
        #myTab li:nth-of-type(3){
            border-bottom: 2px solid #3398DB;
        }
        #myTab li:nth-of-type(1){
            margin-right: 100px;
        }
    </style>
    <script src="__PUBLIC__/js/echarts.common.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div class="layui-conter" style="height: 100%">
    <div class="layui-col-md12" style="height: 100%">
        <div class="navigation" >
            <span>数据></span><span>数据分析></span><span>教务数据分析</span>
        </div>

        <div class="white-conter" style="height: 90%" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="title-blue"><b>全年学员异动</b></div>
                </div>
            </div>
            <div class="layui-card-body" style="margin-left: 30%">
                <form class="layui-form" action="" lay-filter="component-form-group">
                    <div class=" layui-row" style="margin-top: 20px">
                        <div class=" layui-col-xs3" style="width: 20%;">
                            <label class="layui-form-label">年份选择：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="quiz2" class="select_year" lay-filter="select_year">
                                    <volist name="dateList" id="date">
                                        <option value="{$date.year}">{$date.year}年</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class=" layui-col-xs3" style="width: 20%;">
                            <label class="layui-form-label">校区选择：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="quiz3" class="school" lay-filter="select_school">
                                    <volist name="schoolList" id="school">
                                        <option value="{$school.school_area_id}">{$school.school_area_name}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <ul id="myTab" class="nav nav-tabs" style="height: 80%;">
                <li class="active">
                    <a href="#chart1" data-toggle="tab"><span style="display: inline-block;background:orange;height: 10px;width: 10px;border-radius: 50px;margin-right: 10px;"></span>休学</a>
                </li>
                <li>
                    <a href="#container" data-toggle="tab" onclick="javascript:chartresize()"><span style="display: inline-block;background:#16b8be;height: 10px;width: 10px;border-radius: 50px;margin-right: 10px;"></span> 转班</a>
                </li>
                <div class="tab-content" style="height: 100%;">
                    <div class="tab-pane fade in active" id="chart1" ></div>
                    <div class="tab-pane fade" id="container" style="height: 100%;"></div>
                    <div class="tab-pane fade in active" id="chart1"></div>
                </div>
            </ul>
        </div>

    </div>
</div>
</body>
<script>
    var dom = document.getElementById("container");
    //自适应宽高
    var myChartContainer = function () {
        dom.style.width = window.innerWidth-160+'px';
        // dom.style.height = window.innerHeight+'px';
    };

    myChartContainer();

    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '坐标轴刻度与标签对齐';

    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['转班','休学']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        axisPointer: { // 会出现横竖2个方向的指示器
            show: true,
            type: 'line',
            label:{
                show: false, //不显示指示器的文本标签
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: ['20%','20%'],
            data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            axisLabel: {
                show: true,    //这行代码控制着坐标轴x轴的文字是否显示
                textStyle: {
                    color: '#666',   //x轴上的字体颜色
                    fontSize:'16'    // x轴字体大小
                }
            },
            axisLine:{
                show:false
            },
            axisTick: {
                show: false
            },
        },
        yAxis: {
            type: 'value',
            name:'人数（个）',
            nameTextStyle:{
                fontSize:16,
                padding:30
            },
            data:["0","50","100","150","200","250","300"],
            axisLabel: {
                show: true,    //这行代码控制着坐标轴x轴的文字是否显示
                textStyle: {
                    color: '#666',   //x轴上的字体颜色
                    fontSize:'16'    // x轴字体大小
                }
            },
            axisLine:{
                show:false
            },
            axisTick: {
                show: false
            },
            offset:20,

        },
        series: [
            {
                name:'转班',
                type:'line',
                data:[60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
                itemStyle : {
                    normal : {
                        color:"#fff",
                        borderWidth:5,
                        borderColor:"#16b8be",
                        lineStyle:{
                            color:'#16b8be',
                            width:5
                        }
                    }
                },
                symbol:"circle",
                symbolSize:22,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'休学',
                type:'line',
                data:[60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
                itemStyle : {
                    normal : {
                        color:"#fff",
                        borderWidth:5,
                        borderColor:"orange",
                        lineStyle:{
                            color:'orange',
                            width:5
                        }
                    }
                },
                symbol:"circle",
                symbolSize:22,
                markPoint: {
                    data: [
                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                        [{
                            symbol: 'circle',
                            x: '90%',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                normal: {
                                    position: 'start',
                                    formatter: '最大值'
                                }
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }


    //浏览器大小改变时重置大小
    window.onresize = function () {
        myChartContainer();
        myChart.resize();
    };



</script>
<script src="__PUBLIC__/js/layui.all.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</html>
<script type="application/javascript">

    var date = 0;
    var school = 0;
    $(function(){
        date = $("select.select_year").val();
        school = $("select.school").val();
        setChartData();
    });
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
                ,form = layui.form;

        //切换日期
        form.on('select(select_year)', function(data){
            date = data.value;
            setChartData();
        });

        //切换校区
        form.on('select(select_school)', function(data){
            school = data.value;
            setChartData();
        });

    });


    // 设置图表数据
    function setChartData()
    {
        //异步加载数据
        $.get("getStudentChanges/date/"+date+"/school/"+school).done(function (data) {

            var transfer_class_data = data.result.transfer_class;
            var temp_leave_student_data = data.result.temp_leave_student;

            var transfer_class = [];
            for(var i = 1 ; i < 13; i++){
                transfer_class[i-1] = transfer_class_data[i];
            }
            var temp_leave_student = [];
            for(var j = 1 ; j < 13; j++){
                temp_leave_student[j-1] = temp_leave_student_data[j];
            }


            // 填入数据
            myChart.setOption({
                series: [
                    {
                        // 根据名字对应到相应的系列
                        name: '转班',
                        data: transfer_class
                    },
                    {
                        name: '休学',
                        data: temp_leave_student
                    }
                ]
            });
        });

    }


</script>